<script>
	if(!Detector.webgl)
		Detector.addGetWebGLMessage();


	var container, stats;
	var camera, cameraTarget, scene, renderer;
	var projector, plane, cube;
	var mouse2D, mouse3D, ray, rollOveredFace, isShiftDown = false, theta = 45, isCtrlDown = false;
	var offsetSize =RoomUtil.OFFSET_SIZE;
	var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();
	var cubeGeo, cubeMaterial;
	var i, intersector;

	var gui, voxelConfig = {
		orthographicProjection : false
	};

	var stageSize = {
		width : window.innerWidth,
		height : window.innerHeight
	};
	var build;
	var clock = new THREE.Clock();
	var gone2Facade;
	init();
	animate();

	function init() {
		container = document.createElement('div');
		$(container).addClass('stage');
		$('#content').append(container);
		scene = new THREE.Scene();
		// // camera = new THREE.CombinedCamera(window.innerWidth, window.innerHeight - offsetSize.y, 45, 1, 10000, -2000, 10000);
		// camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 100000);
// 		
		// camera.position.y = -600;
		// camera.position.x = 0;
		// camera.position.z = 1000;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
		// camera = new THREE.CombinedCamera( window.innerWidth, window.innerHeight, 45, 1, 10000, -2000, 10000 );
		camera.position.y = 0;
		camera.position.z = 1300;
		
		controls = new FirstPersonControls(camera);
		controls.lookSpeed = 0.0125;
		controls.movementSpeed = 500;
		controls.noFly = false;
		controls.lookVertical = true;
		controls.constrainVertical = false;
		controls.freeze=true;
		
		
		// camera.position.y = 800;
		scene.add(camera);
		cameraTarget = new THREE.Vector3(0, 0, 0);
		projector = new THREE.Projector();
		mouse2D = new THREE.Vector3(0, 10000, 0.5);

		// Lights

		var ambientLight = new THREE.AmbientLight(0x606060);
		scene.add(ambientLight);

		var directionalLight = new THREE.DirectionalLight(0xffffff);
		directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
		scene.add(directionalLight);
		renderer = new THREE.WebGLRenderer({
			antialias : true,
			preserveDrawingBuffer : true
		});
		renderer.setSize(window.innerWidth- offsetSize.x, window.innerHeight - offsetSize.y);
		
		container.appendChild(renderer.domElement);
		

		$(container).css({float:"right"});
		// var url="url('"+"<?php echo Yii::app()->baseUrl.'/images/mouse/normal.png'?>"+"')";
		// alert(url);
		// $('body').css('cursor',url);
		build = new Build(scene, camera);
		
		build.init();

		// stats = new Stats();
		// stats.domElement.style.position = 'absolute';
		// stats.domElement.style.top = '0px';
		// container.appendChild( stats.domElement );

		// document.addEventListener('mousemove', onDocumentMouseMove, false);
		// document.addEventListener('mousedown', onDocumentMouseDown, false);
		// document.addEventListener('mouseup', onDocumentMouseUp, false);
		// document.addEventListener('keydown', onDocumentKeyPress, false);
		
		// document.addEventListener('keydown', onDocumentKeyDown, false);
		// document.addEventListener('keyup', onDocumentKeyUp, false);

		// // add GUI
		// gui = new DAT.GUI();
		// gui.add(voxelConfig, 'orthographicProjection').onChange(function(){
		//
		// if ( voxelConfig.orthographicProjection ) {
		// camera.toOrthographic();
		// camera.position.x = 1000;
		// camera.position.y = 707.106;
		// camera.position.z = 1000;
		// theta = 90;
		// } else {
		// camera.toPerspective();
		// camera.position.y = 800;
		// }
		//
		// });
		// gui.close();

	}

	function onDocumentMouseMove(event) {

		event.preventDefault();

		// mouse2D.x = ( (event.clientX-offsetSize.x) / (window.innerWidth-offsetSize.x) ) * 2 - 1;
		// mouse2D.y = - ( (event.clientY-offsetSize.y) / (window.innerHeight-offsetSize.x) ) * 2 + 1;
		build.moveArea(event);
	}

	function onDocumentMouseDown(event) {

		build.startArea(event);
	}

	function onDocumentMouseUp(event) {

		build.endArea(event);

	}
	
// 	debug用
	function onDocumentKeyPress(event){

		switch(event.keyCode){

			case 32:

			// document.removeEventListener('mousemove', onDocumentMouseMove, false);
			// document.addEventListener('mousemove', ctrlWalls, false);
			
			$('canvas').unbind('mousemove');
			$('canvas').bind('mousemove', ctrlWalls);
			
			
			break;
			case 72://H 校验house的合法性
			
			if(gone2Facade){
				break;
			}
			var walls=build.calcWalls();
			scene=new THREE.Scene;
			build.setScene(scene);
			gone2Facade=true;
			scene.add(camera);
			build.facade(walls);
			// document.removeEventListener('mousemove', ctrlWalls, false);
			// document.removeEventListener('mousemove', onDocumentMouseMove, false);
			// document.removeEventListener('mousedown', onDocumentMouseDown, false);
			// document.removeEventListener('mouseup', onDocumentMouseUp, false);
			$('canvas').unbind('mousemove');
			$('canvas').unbind('mousedown');
			$('canvas').unbind('mouseup');
			break;
			
			case 66://B 设定controls，方向控制。
			controls.freeze=false;
				
		}
	}

	function ctrlWalls(event){
		build.ctrlWalls(event);
	}
	function onDocumentKeyDown(event) {

		switch( event.keyCode ) {

			case 16:
				isShiftDown = true;
				break;
			case 17:
				isCtrlDown = true;
				break;

		}

	}

	function onDocumentKeyUp(event) {

		switch( event.keyCode ) {

			case 16:
				isShiftDown = false;
				break;
			case 17:
				isCtrlDown = false;
				break;

		}
	}

	function save() {

		window.open(renderer.domElement.toDataURL('image/png'), 'mywindow');

	}

	//

	function animate() {

		requestAnimationFrame(animate);

		render();

	}

	function render() {

		scene=build.scene;
		var delta = clock.getDelta();
		controls.around(delta);
		controls.cameraInsector();
		renderer.render(scene, camera);

	}
</script>
<?php include dirname(__FILE__) . '/buildPanel.php';?>

